<template>
	<view class="topstart"></view>
	<view class="name">广告火了</view>
	<view class="search">
		<view class="search_left" @click="goaddress">
			<image src="../../static/newIcon/address.png" mode=""></image>
			<!-- 经开广场-2号楼 -->
			{{argument.address}}
		</view>
		<view class="search_right">
			<u-search placeholder="请输入关键字" @custom='custom' v-model="msg" :clearabled='false' bg-color='#fff'
				border-color='#F0F0F0'></u-search>
		</view>
	</view>
	<view class="banner">
		<u-swiper :list="bannerlistS" height='400rpx'></u-swiper>
	</view>
	<view class="tabsList">
		<view class="tabs" @click="Goindex('OFFICIAL')">
			<image src="../../static/newIcon/77.png" mode=""></image>
			<view>官方</view>
		</view>
		<view class="tabs" v-for="item,index in tabs" :key="index" @click="Goindex(item.id)">
			<image src="../../static/newIcon/63.png" v-if="item.id==1" mode=""></image>
			<image src="../../static/newIcon/65.png" v-if="item.id==2" mode=""></image>
			<image src="../../static/newIcon/66.png" v-if="item.id==3" mode=""></image>
			<image src="../../static/newIcon/71.png" v-if="item.id==4" mode=""></image>
			<image src="../../static/newIcon/67.png" v-if="item.id==5" mode=""></image>
			<image src="../../static/newIcon/68.png" v-if="item.id==6" mode=""></image>
			<image src="../../static/newIcon/69.png" v-if="item.id==7" mode=""></image>
			<view>{{item.name}}</view>
		</view>
	</view>
	<view class="information">
		<view class="dange" v-for="item,index in news" @click="goDetails(item)" :key="index">
			<u-image :show-loading="true" :src="url + item.image.split(',')[0]" width="345rpx" height="345rpx"
				radius='20rpx'></u-image>
			<!-- <image :src="url + item.image.split(',')[0]" mode=""></image> -->
			<view class="wenben">
				<view class="titke">
					<text class="hongs"> 最新发布 </text>
					<text class="neir">
						{{item.shotMsg}}
					</text>
				</view>
				<view class="fenlie">
					<view class="danage">
						{{item.city}}
					</view>
				</view>
				<view class="danage">
					{{item.createTime.substring(5, 10)}}
					{{item.createTime.substring(11, 16)}}
				</view>
				<view class="jiaqian">
					<view class="price" v-if="item.type==1">
						<text>信息费 :￥</text>
						<text style="font-size: 32rpx;">{{item.memberContactPrice}}</text>
					</view>
					<view class="price" v-if="item.type==2">
						<text>信息费 : ￥</text>
						<text style="font-size: 32rpx;">{{item.memberContactPrice}}</text>
					</view>
					<!-- <view class="lilna">
						{{item.createTime}}
					</view> -->
					<!-- <view class="lilna">
						{{item.viewers}}浏览
					</view>
					<view class="lianx">
						{{item.contacts}}人联系
					</view> -->
				</view>
			</view>
		</view>
	</view>
	<zdy-tabbar :current-page='0'></zdy-tabbar>
	<view class="dangchukuan" v-show="denglumtk">
		<view class="neirdeli">
			<view class="titlebiaoti"> 您还未登录,请先登录！ </view>
			<view class="qianqudenglu">
				<button class="getphonebtn" @click="danchukuan"> 关闭</button>
				<button class="getphonebtn" open-type="getPhoneNumber" @getphonenumber="bindGetUserInfo">
					微信快捷登录</button>
				<!-- <button class="getphonebtn" v-if="!wx" @click="bindGetUserInfo"> 微信快捷登录</button> -->
			</view>
			<view class="xiamian">
				<view class="yuedu">
					<image src="../../static/unaquna.png" v-if="duihao" mode="" @click="duihaa"></image>
					<image src="../../static/duihao.png" v-if="yuanqunaduig" mode="" @click="duihab"></image>
				</view>
				<view class="zhiti"> 我已阅读并同意 <view class="yogh" @click="handleOpenPrivacyContract"> 用户隐私协议、 </view>
					<view class="yiexsi" @click="handleOpenPrivacyContract"> 隐私协议 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		indexInfList, //最新
		newgetOpenId,
		bannerList,
		viewerAdd,
		CATEGORY,
		shengpage,
		getUserInfoByRecCode,
		bindRecommendShip,
		contentList,
		addHis
	} from "../../request/api.js"
	export default {
		data() {
			return {
				duihao: true,
				yuanqunaduig: false,
				denglumtk: false, //前去登录模态框
				modalShow: false,
				url: '',
				news: [],
				selectedIdx: 0,
				bannerlistS: [],
				pageNo: 1,
				content: [],
				total: '',
				msg: '',
				tabs: [],
				status: 'NEWS', //当前选择tabs
				argument: {
					city: '',
					address: '选择位置'
				}
			}
		},
		onReachBottom() {
			if (this.total <= this.news.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				this.pageNo++;
				this.zuixin(this.status)
			}
		},
		onShow() {
			this.url = getApp().globalData.url + '/'
			console.log(this.url, 'url');
		},
		onLoad(e) {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
			} else {
				// this.logins()
			}
			this.banner()
			console.log(e, '首页onload');
			if (e.scene) {
				this.Recommended(e.scene) //绑定推荐人
			}
			this.zuixin(this.status)
			// this.contentListData()
			this.felri() //获取分类
		},
		methods: {
			danchukuan() {
				console.log('收回');
				this.denglumtk = false
			},
			bindGetUserInfo(e) {
				let that = this;
				if (that.yuanqunaduig === false) {
					wx.showToast({
						title: '请勾选用户隐私协议、隐私协议',
						icon: 'none'
					});
					return;
				}
				// #ifdef APP
				uni.navigateTo({
					url: "./Sign"
				})
				// #endif
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					wx.showToast({
						title: '您拒绝了授权',
						icon: 'none'
					});
					return;
				}
				console.log(e);
				that.jiamiinfo = e.detail;
				that.loginsa();
				// #endif
			},
			loginsa() {
				let that = this
				wx.showLoading({
					title: '登录中',
				})
				uni.login({
					success: res => {
						console.log(res, 'jjjj')
						newgetOpenId({
							code: res.code,
							data: that.jiamiinfo.encryptedData,
							iv: that.jiamiinfo.iv,
						}).then(responts => {
							console.log(responts);
							const infos = responts.result;
							if (responts.success) {
								uni.hideLoading()
								that.userInfo = responts.result.memberInfo
								uni.setStorageSync('userInfo', JSON.stringify(infos.memberInfo));
								uni.setStorageSync('token', infos.token);
								that.denglumtk = false
							} else {
								uni.hideLoading()
								uni.showToast({
									title: responts.message,
									icon: 'none'
								});
							}
						})
					}
				})
			},
			duihaa() {
				this.duihao = false
				this.yuanqunaduig = true
			},
			duihab() {
				this.yuanqunaduig = false
				this.duihao = true
			},
			closeModal() {
				this.modalShow = false
				this.getLoginType()
			},
			custom() {
				this.news = []
				this.tota = ''
				this.zuixin(this.status)
			},
			felri() {
				shengpage().then(res => {
					console.log(res, '分类');
					this.tabs = res.result.records
				})
			},
			goAnnouncement() {
				uni.navigateTo({
					url: '/pages/announcement/announcement'
				})
			},
			contentListData() {
				contentList().then(res => {
					console.log(res, '公告');
					this.content = res.result.records
				})
			},
			// 绑定推荐人
			Recommended(e) {
				getUserInfoByRecCode(e).then(res => {
					if (res.success) {
						bindRecommendShip(res.result.id).then(data => {
							console.log(data, '绑定推荐人');
						})
					}
					console.log(res, '根据邀请码获取用户信息');
				})
			},
			Goindex(index) {
				uni.navigateTo({
					url: '/pages/details/fenlei?id=' + index
				})
			},
			goaddress() {
				let taht = this
				uni.chooseLocation({
					success: function(res) {
						taht.argument.address = res.name
						console.log('详细地址：', res);
					}
				});
			},
			banner() {
				bannerList().then(res => {
					console.log(res, 'banner');
					if (res.result.length != 0) {
						this.bannerlistS = res.result.map(data => {
							return this.url + 'detail/' + data.image
						})
					}
				})
			},
			goDetails(e) {
				// if (!uni.getStorageSync('userInfo')) {
				// 	this.denglumtk = true //前去登录模态框 = true
				// 	return;
				// }
				// addHis({
				// 	createBy: JSON.parse(uni.getStorageSync('userInfo')).id,
				// 	infoId: e.id,
				// 	memberContactPrice: e.memberContactPrice,
				// 	officialContactPrice: e.officialContactPrice,
				// 	type: e.type,
				// 	image: e.image,
				// 	shotMsg: e.shotMsg,
				// }).then(res => {
				// 	console.log(res);
				// })
				// return
				// viewerAdd(e.id).then(res => {})
				uni.navigateTo({
					url: '../details/index?detalis=' + JSON.stringify(e)
				})
			},
			logins() {
				let that = this;
				console.log("微信平台");
				uni.login({
					success: res => {
						console.log(res);
						newgetOpenId({
							code: res.code
						}).then(responts => {
							console.log(responts, '微信登录');
							const infos = responts.result;
							if (responts.success) {
								uni.hideLoading();
								if (responts.result.token != null) {
									that.userInfo = infos.memberInfo
									uni.setStorageSync('userInfo', JSON.stringify(infos.memberInfo));
									uni.setStorageSync('token', infos.token);
								}
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '获取用户信息' + responts.message,
									icon: 'none'
								});
							}
						}).catch(error => {
							console.log(error);
						});
					}
				});
			},
			zuixin(e) {
				uni.showLoading({
					title: '加载中',
				})
				this.status = e
				indexInfList({
					status: e,
					pageNo: this.pageNo,
					msg: this.msg
				}).then(res => {
					if (res.success) {
						this.news = this.news.concat(res.result.records)
						this.total = res.result.total; //数据总条数
					}
					uni.hideLoading()
					console.log(this.news, '列表');
				})
			},
			details() {
				uni.navigateTo({
					url: '/pages/details/index'
				})
			},
			selectItem(index) {
				console.log(index);
				this.news = []
				this.pageNo = 1
				if (index == 0) {
					this.zuixin('NEWS')
				}
				if (index == 1) {
					this.zuixin('HOT')
				}
				if (index == 2) {
					this.zuixin('NEAR_CITY')
				}
				if (index == 3) {
					this.zuixin('FOLLOW')
				}
				this.selectedIdx = index;
			},
		}
	}
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style scoped lang="less">
	.topstart {
		height: var(--status-bar-height);
		padding-bottom: 20rpx;
	}

	.name {
		font-size: 36rpx;
		font-weight: 700;
		padding: 20rpx 40rpx;
	}

	.banner {
		padding: 20rpx;
	}

	.search {
		display: flex;
		padding: 20rpx;
		color: #333;
		align-items: center;
		margin-top: 20rpx;

		.search_right {
			width: 50%;

			/deep/.u-search__content {
				height: 75rpx;
				padding: 0 5rpx 0 10rpx;
			}
		}

		.search_left {
			width: 49%;
			font-size: 28rpx;
			font-weight: 700;
			display: flex;
			align-items: center;

			image {
				padding-right: 10rpx;
				width: 30rpx;
				height: 34rpx;
			}
		}
	}

	.tabsList {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 24rpx;
		color: #333;

		.tabs {
			text-align: center;
			width: 25%;
			padding: 10rpx 0;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.information {
		width: 702rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 200rpx;

		.dange {
			width: 345rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 20rpx;

			image {
				border-radius: 20rpx;
				width: 345rpx;
				height: 345rpx;
			}

			.wenben {
				width: 345rpx;
				padding: 0rpx 15rpx 20rpx 15rpx;
				box-sizing: border-box;
				background-color: #fff;

				.titke {
					display: -webkit-box;
					/* 使用弹性盒子布局模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列子元素 */
					-webkit-line-clamp: 2;
					/* 限制在三行 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;

					/* 使用省略号表示文本溢出 */
					.hongs {
						margin-right: 10rpx;
						width: 118.91rpx;
						height: 40.31rpx;
						border-radius: 16rpx;
						background: #feecea;
						text-align: left;
						font-size: 24rpx;
						color: #f8492e;
						padding: 5rpx 10rpx;
					}

					.neir {
						font-size: 32rpx;
						color: #333333;
						text-transform: none;
					}
				}

				.fenlie {
					display: flex;
					justify-content: space-between;
					margin-top: 23rpx;
					margin-bottom: 23rpx;

					.danage {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						font-style: normal;
						text-transform: none;
					}
				}

				.jiaqian {
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.price {
						color: #F8492E;
						font-size: 32rpx;

						text {
							font-size: 20rpx;
						}
					}

					.lilna {
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						text-transform: none;
					}

					.lianx {
						font-weight: 400;
						font-size: 20rpx;
						color: #AAAAAA;
						text-transform: none;
					}
				}
			}
		}
	}

	.tap {
		width: 702rpx;
		margin: 0 auto;
	}

	.atest {
		width: 702rpx;
		// height: 612rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 32rpx 20rpx 40rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.atestimg {
			display: flex;
			justify-content: space-between;

			image {
				width: 320rpx;
				height: 230rpx;
			}
		}

		.atesttete {
			margin-top: 20rpx;
			width: 662rpx;
			margin-bottom: 32rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 36rpx;
			font-style: normal;
			text-transform: none;
		}

		.aptextguan {
			display: flex;
			align-items: center;

			.gjc {
				margin-right: 20rpx;
			}

			.chiguan {
				display: flex;

				text {
					padding-left: 20rpx;
					padding-right: 20rpx;
					height: 48rpx;
					background: #FFFFFF;
					line-height: 48rpx;
					border-radius: 45rpx 45rpx 45rpx 45rpx;
					border: 1rpx solid #707070;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-right: 30rpx;
				}
			}
		}

		.aeeawei {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;

			.zou {
				.shijian {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-bottom: 10rpx;
				}

				.lanlian {
					display: flex;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;

					.liulan {
						margin-right: 40rpx;
					}
				}
			}

			.you {
				width: 200rpx;
				height: 72rpx;
				background: #F8492E;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FDFFFF;
				line-height: 72rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.dangchukuan {
		// opacity: 0.7;
		position: fixed;
		left: 50%;
		top: 50%;
		// transform: translate(-50%, -50%);
		z-index: 99999;

		.neirdeli {
			width: 700rpx;
			height: 500rpx;
			background-color: #FAFAFA;
			margin: 0 auto;
			// margin-top: 400rpx;
			position: absolute;
			// left: 0;
			// top: 0;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 20rpx;
			padding-bottom: 34rpx;
			box-sizing: border-box;
		}

		.titlebiaoti {
			width: 700rpx;
			height: 200rpx;
			text-align: center;
			font-size: 43rpx;
			line-height: 300rpx;
			// border-bottom: 2rpx solid #55ff00;
		}

		.qianqudenglu {
			width: 700rpx;
			height: 200rpx;
			text-align: center;
			display: flex;
			line-height: 200rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
		}
	}

	.xiamian {
		width: 700rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		line-height: 200rpx;
		color: #000000;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		padding-left: 34rpx;
		box-sizing: border-box;
	}

	.zhiti {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 4rpx;
		font-size: 24rpx;
	}

	.yuedu {
		// width: 54rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
	}

	.yuedu image {
		width: 30rpx;
		height: 30rpx;
	}

	.yogh {
		color: #94e75d;
	}

	.yiexsi {
		color: #94e75d;
	}

	.getphonebtn {
		// width: 100%;
		// height: 100%;
		width: 300rpx;
		height: 100rpx;
		background-color: #ff5d3d;
		// margin-top: 30rpx;
		font-size: 30rpx;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: 1rpx solid #eee;
	}
</style>